import React, { useEffect } from "react";
import * as echarts from 'echarts';

const Echartsthree: React.FC = () => {
    useEffect(() => {
        const chartDom = document.getElementById('chart-three')!;
        const myChart = echarts.init(chartDom);
        const option = {
            title: {
                text: '已闭合 150项',
                left: 'center',
                top: '25%',  // 同步下移标题位置
                textStyle: {
                    color: '#fff',
                    fontSize: 10,
                }
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                bottom: 40,  // 上移图例位置
                left: 'center',
                data: ['已闭合', '未闭合'],
                itemGap: 3,   // 进一步缩小图例项间距
                textStyle: {
                    color: '#fff',
                    fontSize: 10,
                }
            },
            series: [
                {
                    name: '隐患状态',
                    type: 'pie',
                    radius: ['35%', '55%'],  // 进一步缩小饼图
                    center: ['50%', '30%'],  // 下移饼图位置
                    avoidLabelOverlap: true,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: false,
                            fontSize: '30',
                            fontWeight: 'bold',
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 100, name: '已闭合', itemStyle: { color: '#5087ec' } },
                        { value: 50, name: '未闭合', itemStyle: { color: '#ff5e59' } }
                    ]
                }
            ]
        };
        myChart.setOption(option);
        // 窗口调整大小处理
        const handleResize = () => {
            myChart.resize();
          };
          window.addEventListener('resize', handleResize);
    
          return () => {
            window.removeEventListener('resize', handleResize);
            myChart.dispose();
          };
    }, []);

    return (
        <div style={{ width: '100%', height: '100%' }}>
            <p>隐患状态占比分析</p>
            <div id="chart-three" style={{ width: '100%', height: '100%' }}></div>
        </div>
    );
};

export default Echartsthree;